<template style="display:flex; flex-direction: column;">
  <div class="staff-list">
    <h5>账号列表</h5>
    <el-table :data="datelist"  @selection-change="handleSelectionChange" ref="multipleTable" >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column width="180px" label="账号" prop="account"></el-table-column>
      <el-table-column label="用户组" prop="userGroup"></el-table-column>
      <el-table-column label="创建时间" prop="ctime"></el-table-column>
      <el-table-column label="操作" width="200">
       
        <template slot-scope="e">   <el-button @click="compile(e.row)">编辑</el-button>
        <el-button type="danger" @click="removebtn(e.row)">删除</el-button></template>
      
      </el-table-column>
    </el-table>

    <div class="page">
  
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage" 
        :page-sizes="pagesizes"
        :page-size="pagesizess"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="choose">
      <!--slot-scope 动态获取点的值  -->
      <div style=" margin-bottom:10px">
      <template >
      <el-button type="danger"  @click="batchdelBtn">批量删除</el-button>
      <el-button type="primary" @click="cancel">取消选择</el-button>
      </template>
       </div>
    </div>
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" >
  <el-form :model="form" >
    <el-form-item label="账号" :label-width="formLabelWidth"  >
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="用户分组" :label-width="formLabelWidth">
      <el-select v-model="form.goup" placeholder="普通管理员">
        <el-option label="普通管理员" value="普通管理员"></el-option>
        <el-option label="超级管理员" value="超级管理员"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="keepmessage">确 定</el-button>
  </div>
  </el-dialog>
  </div>
</template>

<script>
// edit
import {userList,removebtn,batchdel,edit} from '@/apis/user'
export default {
  data() {
    return {
            dialogTableVisible: false,
            dialogFormVisible: false,
           form: {
          name: '',
          delivery: false,
          goup:''
        },
        formLabelWidth: '80px',
      checked: false,
      datelist: [],
      total:0,
      pagesizes:[4,10,15],
      currentPage:1,    //页数
      pagesizess:4,   //条数
     
    };
  },
  created() {
    this.upload() 
 
  },methods:{
    upload(){
      userList({currentPage:this.currentPage,pageSize:this.pagesizess}).then((res)=>{
        for (let objs of res.data.data) {
          let tian= new Date(objs.ctime)
         objs.ctime= tian.getFullYear() + "-" +((tian.getMonth() + 1)<10?' 0'+(tian.getMonth() + 1):(tian.getMonth() + 1) )+ "-" +(tian.getDate()<10?'0'+tian.getDate():tian.getDate()) ;
        }
      
      this.datelist=res.data.data
      this.total=res.data.total
      })
    },removebtn(row){    //删除信息
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           removebtn({ id:row.id}).then((res)=>{

         console.log(res);
         if(res.data.code==0){
                this.upload()
         }
       
       })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },handleSizeChange(newsize){
      this.pagesizess=newsize
 console.log(newsize);
//  条数
   this. upload()
    },handleCurrentChange(newpage){
this.currentPage=newpage
// 页数
  console.log(newpage);
    this. upload()
    },batchdelBtn(){
     
      if(this.ids==undefined||this.ids.length==0 )return;


      // 批量删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
    
       
       let a=JSON.stringify(this.ids)
      batchdel({ids:a}).then((res)=>{
        if(res.data.code==0){
            this.$message({
          message: '删除成功',
          type: 'success',
          center: true,
          duration:500,
        })
        this.upload()
        }
      })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    }, handleSelectionChange(val) {
        this.multipleSelection = val;
        // 遍历取到所点的id
          this.ids = val.map((obj) => obj.id);
          console.log( this.ids);
    },cancel(){    //取消选择
      //this.$refs直接获取元素节点
          this.$refs.multipleTable.clearSelection();
      },compile(row){   //渲染到框子里面
        this.dialogFormVisible=true
        this.form.name=row.account
       this.form.goup=row.userGroup
       this.as=row.id
      },keepmessage(){
       edit({id:this.as,account:this.form.name,userGroup:this.form.goup}).then((res)=>{
        if(res.data.code==0){
            this.dialogFormVisible=false
            this.upload()
        }
       })
      }
  }
};
</script>

<style lang="less" scoped>
.staff-list {
  
  width: 100%;
   height: 470px;
  background: #fff;
  box-shadow: 6px 6px 20px #ccc;
  border-radius: 6px;
  h5 {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: rgb(0, 0, 0);
    font-weight: 200;
    border-bottom: 1px solid rgb(216, 206, 206);
    margin-bottom: 10px;
  }
  .page {
    margin: 15px 15px;
  }
  .choose {
    margin-left: 15px;
  }
}
</style>